<template>
  <div class="walletHeaderCont">
    <div class="flex w-[70%] items-center justify-start headerCont_cryptoTotal">
      <div class="flex-1">
        <h2 class="mb-2 text-xl text-color1">
          {{ $t("资产总额") }}({{ walletData.coin_name }})
        </h2>
        <div>
          <p class="ml-4 text-xl">
            {{ walletData.total }}
          </p>
        </div>
      </div>
      <div class="flex-1">
        <h2 class="mb-2 text-xl text-color1">
          {{ $t("可用") }}({{ walletData.coin_name }})
        </h2>
        <div>
          <p class="ml-4 text-xl">
            {{ walletData.available }}
          </p>
        </div>
      </div>
      <div class="flex-1">
        <h2 class="mb-2 text-xl text-color1">
          {{ $t("冻结") }}({{ walletData.coin_name }})
        </h2>
        <div>
          <p class="ml-4 text-xl">
            {{ walletData.freeze }}
          </p>
        </div>
      </div>
    </div>
    <div class="headerCont_btnCont">
      <el-button size="large" type="primary" @click="showSendDrawer">
        {{ $t("发送") }}
      </el-button>
      <el-button
        size="large"
        type="primary"
        @click="isShowReceiveDrawer = true"
      >
        {{ $t("接收") }}
      </el-button>
    </div>
  </div>
  <el-divider />
  <h3 class="mb-4 text-large text-color1">{{ $t("账户流水") }}</h3>
  <el-table :data="walletOrderList" v-loading="loading">
    <el-table-column prop="amount" :label="$t('数量')" align="center">
      <template #default="scope">
        <span
          :class="
            scope.row.sg
              ? scope.row.sg == '+'
                ? 'text-success'
                : 'text-danger'
              : ''
          "
        >
          {{ scope.row.sg }} {{ scope.row.amount }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="amount_after"
      :label="$t('交易后数量')"
    />
    <el-table-column
      align="center"
      prop="freeze_after"
      :label="$t('冻结后数量')"
    />
    <el-table-column align="center" prop="coin_name" :label="$t('币种')">
    </el-table-column>
    <el-table-column align="center" prop="trade_type" :label="$t('类型')">
    </el-table-column>
    <el-table-column align="center" :label="$t('时间')" width="250">
      <template #default="scope">
        {{ dayjs(scope.row.create_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
    </el-table-column>
  </el-table>

  <div class="flex justify-center mt-5">
    <el-pagination
      background
      layout="total, sizes,prev, pager, next, jumper"
      :total="totalCount"
      :default-current-page="query.page"
      :default-page-size="query.pagesize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
  <walletSendDrawer
    :show="isShowSendDrawer"
    :coinName="walletData.coin_name"
    @close="
      (bill_no) => {
        isShowSendDrawer = false;
        if (bill_no) {
          currentBillNo = bill_no;
        }
      }
    "
  />
  <walletReceiveDrawer
    :show="isShowReceiveDrawer"
    :coinName="walletData.coin_name"
    @close="isShowReceiveDrawer = false"
  />
  <RecordDetail
    v-if="currentBillNo"
    :show="isShowOrderDetail"
    :bill_no="currentBillNo"
    from="send"
    @close="
      () => {
        currentBillNo = '';
        isShowOrderDetail = false;
        getWalletBills();
      }
    "
  />
</template>
<script setup>
// 引入组件
import walletSendDrawer from "./components/walletSendDrawer.vue";
import walletReceiveDrawer from "./components/walletReceiveDrawer.vue";
import RecordDetail from "./components/recordDetail.vue";
import { dayjs } from "element-plus";

import { ref, reactive, watch, computed, onMounted } from "vue";
import { useUserStore } from "@/store/modules/user";
import { getWalletHomeNewApi, getWalletRecordApi } from "@/api/wallet/index";
import { numberToCurrencyNo } from "@/utils/utils";
import { ElMessage } from "element-plus";
const useUser = useUserStore();
const walletOrderList = ref([]);

const loading = ref(true);
let query = reactive({
  page: 1,
  pagesize: 10,
});
let walletData = reactive({
  total: 0,
  available: 0,
  freeze: 0,
  list: [],
});

//是否可以发送
const isItPossibleToSend = computed(() => {
  return walletData.total !== "0";
});
// 获取币种列表
const getWalletHomeData = async () => {
  try {
    loading.value = true;
    const { total_asset, freeze, available, coin_name, chains } =
      await getWalletHomeNewApi();
    walletData.total = numberToCurrencyNo(Number(total_asset));
    walletData.available = numberToCurrencyNo(Number(available));
    walletData.freeze = numberToCurrencyNo(Number(freeze));
    walletData.coin_name = coin_name;
    //储存币种列表
    useUser.setCoinListInfo(chains);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

onMounted(() => {
  getWalletHomeData();
});

// 控制发送弹窗显示
const isShowSendDrawer = ref(false);
// 控制接收弹窗显示
const isShowReceiveDrawer = ref(false);
// 控制发送成功弹窗显示
const isShowOrderDetail = ref(false);
const currentBillNo = ref("");
watch(
  () => currentBillNo.value,
  (newVal) => {
    console.log(newVal);
    if (newVal) {
      isShowOrderDetail.value = true;
    } else {
      isShowOrderDetail.value = false;
    }
  }
);
const showSendDrawer = () => {
  if (isItPossibleToSend.value) {
    isShowSendDrawer.value = true;
  } else {
    ElMessage({
      showClose: true,
      message: t("余额不足"),
      type: "error",
      grouping: true,
    });
  }
};
const totalCount = ref(0);
const getWalletBills = async () => {
  try {
    loading.value = true;
    const params = { ...query };
    const { page, list, extra } = await getWalletRecordApi(params);
    walletOrderList.value = list;
    totalCount.value = page.total_count;
    orderTypes.value = extra.trade_type_map;
    loading.value = false;
  } catch (e) {
    loading.value = false;
    return false;
  }
};
getWalletBills();
const handleCurrentChange = async (number) => {
  query.page = number;
  await getWalletBills();
};
const handleSizeChange = async (number) => {
  query.pagesize = number;
  await getWalletBills();
};
</script>
<style lang="scss">
.walletHeaderCont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
